<template>
  <main class="bg-white dark:bg-gray-900">

    <div class="relative flex">

      <!-- Content -->
      <div class="w-full md:w-1/2">
        <div class="min-h-[100dvh] h-full flex flex-col after:flex-1">

          <div class="flex-1">
            <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
              <!-- Logo -->
              <router-link class="block" to="/">
                <svg class="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                  <path
                    d="M31.956 14.8C31.372 6.92 25.08.628 17.2.044V5.76a9.04 9.04 0 0 0 9.04 9.04h5.716ZM14.8 26.24v5.716C6.92 31.372.63 25.08.044 17.2H5.76a9.04 9.04 0 0 1 9.04 9.04Zm11.44-9.04h5.716c-.584 7.88-6.876 14.172-14.756 14.756V26.24a9.04 9.04 0 0 1 9.04-9.04ZM.044 14.8C.63 6.92 6.92.628 14.8.044V5.76a9.04 9.04 0 0 1-9.04 9.04H.044Z" />
                </svg>
              </router-link>
            </div>
          </div>

          <div class="w-full max-w-sm px-4 py-8 mx-auto">
            <h1 class="mb-6 text-3xl font-bold text-gray-800 dark:text-gray-100">Create your Account</h1>
            <!-- Form -->
            <form @submit.prevent="onSubmit">
              <div class="space-y-4">
                <div>
                  <label class="block mb-1 text-sm font-medium" for="username">Username <span
                      class="text-red-500">*</span></label>
                  <input id="username" v-model="username" class="w-full form-input" type="text" autocomplete="username" />
                </div>
                <div>
                  <label class="block mb-1 text-sm font-medium" for="name">Full Name</label>
                  <input id="name" v-model="fullName" class="w-full form-input" type="text" />
                </div>
                <div>
                  <label class="block mb-1 text-sm font-medium" for="password">Password</label>
                  <input id="password" v-model="password" class="w-full form-input" type="password" autocomplete="new-password" />
                </div>
              </div>
              <p v-if="errorMessage" class="mt-3 text-sm text-red-600">{{ errorMessage }}</p>
              <div class="flex items-center justify-between mt-6">
                <div class="mr-1">
                  <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" />
                    <span class="ml-2 text-sm">Email me about product news.</span>
                  </label>
                </div>
                <button type="submit"
                  class="ml-3 text-gray-100 bg-gray-900 btn hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white whitespace-nowrap"
                  :disabled="loading">
                  <span v-if="loading">Signing up...</span>
                  <span v-else>Sign Up</span>
                </button>
              </div>
            </form>
            <!-- Footer -->
            <div class="pt-5 mt-6 border-t border-gray-100 dark:border-gray-700/60">
              <div class="text-sm">
                Have an account? <router-link
                  class="font-medium text-violet-500 hover:text-violet-600 dark:hover:text-violet-400" to="/signin">Sign
                  In</router-link>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Image -->
      <div class="absolute top-0 bottom-0 right-0 hidden md:block md:w-1/2" aria-hidden="true">
        <img class="object-cover object-center w-full h-full" src="../images/auth-image.jpg" width="760" height="1024"
          alt="Authentication" />
      </div>

    </div>

  </main>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Signup'
})
</script>